<template>
  <div class="container">
    <header>
      <van-nav-bar
        title="工程节点验收详情"
        left-arrow
        @click-left="$router.back()">
      </van-nav-bar>
    </header>
    <van-tabs color="#26A3FF" v-model="tabActive">
      <van-tab title="基本信息">
        <div class="wd-scroll-body">
          <van-field
            class="wd-detail-field"
            v-model="form.reviewName"
            label="验收人"
            label-width="130px"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.reviewDate"
            label="验收日期"
            label-width="130px"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.projectName"
            label-width="130px"
            label="验收项目"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.contractName"
            label-width="130px"
            label="合同名称"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.contractCode"
            label-width="130px"
            label="合同编号"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.contractUnit"
            label-width="130px"
            label="责任合同单位"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.payNode"
            label-width="130px"
            label="支付节点"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.building"
            label-width="130px"
            label="楼栋"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.subpackage"
            label-width="130px"
            label="分包合同种类"
            readonly/>
          <van-field
            class="wd-detail-field"
            v-model="form.figureNode"
            label-width="130px"
            label="形象进度控制节点"
            readonly/>
          <div class="wd-group">
            <div class="wd-group__title">形象进度确认</div>
            <div class="wd-group__body">
              <van-field
                class="wd-detail-field"
                v-model="form.figureTable"
                label-width="130px"
                label="形象进度确认表"
                readonly/>
              <van-field
                class="wd-detail-field"
                v-model="form.figurePhoto"
                label-width="130px"
                label="形象进度照片"
                readonly/>
            </div>
          </div>
          <div class="wd-group">
            <div class="wd-group__title">质量安全验收确认</div>
            <div class="wd-group__body">
              <van-field
                class="wd-detail-field"
                v-model="form.reviewTable"
                label-width="130px"
                label="质量验收确认表"
                readonly/>
            </div>
          </div>
          <div class="wd-group">
            <div class="wd-group__title">节点完成申报审批审查项</div>
            <div class="wd-group__body">
              <van-cell class="wd-cell-checkbox wd-detail-field" title="工程节点是否汇报完成">
                <i v-if="form.nodeReport == '1' || form.nodeReport == '_1'" class="van-icon van-icon-success"></i>
              </van-cell>
              <van-cell class="wd-cell-checkbox wd-detail-field" title="质量管理整改完成率是否100%">
                <i v-if="form.qualityReport == '1' || form.qualityReport == '_1'" class="van-icon van-icon-success"></i>
              </van-cell>
              <van-cell class="wd-cell-checkbox wd-detail-field" title="安全管理整改完成率是否100%">
                <i v-if="form.securityReport == '1' || form.securityReport == '_1'" class="van-icon van-icon-success"></i>
              </van-cell>
              <van-cell class="wd-cell-checkbox wd-detail-field" title="检验批（隐藏）及分项资料是否移交总包">
                <i v-if="form.jypjfx == '1'" class="van-icon van-icon-success"></i>
              </van-cell>
              <van-cell class="wd-cell-checkbox wd-detail-field" title="对分包单位的罚款是否执行落地">
                <i v-if="form.dfbdwcf == '1'" class="van-icon van-icon-success"></i>
              </van-cell>
              <van-cell class="wd-cell-checkbox wd-detail-field" title="甲供材超量费用是否已扣减">
                <i v-if="form.jgcclfy == '1'" class="van-icon van-icon-success"></i>
              </van-cell>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="审批痕迹">
        <div class="wd-scroll-body">
          <p style="padding-top: 15px; font-size: 14px" class="wd-note-text" v-if="workflow.length == 0">{{sphjLoading ? '加载中...' : '无数据'}}</p>
          <ul v-else class="wd-shenpi">
            <li v-for="item in workflow">
              <div class="wd-shenpi__box">
                <div class="wd-shenpi__head">{{item.ActivityName}}</div>
                <div class="wd-shenpi__body">
                  <p>
                    <strong>审批意见：</strong>
                    <span>{{item.Comment}}</span>
                  </p>
                  <p>
                    <strong>审批痕迹：</strong>
                    <span>{{item.PostName}}</span>
                    <i :class="shenpihj(item.State)"></i>
                  </p>
                  <p>
                    <strong v-html="'时&emsp;&emsp;间：'"></strong>
                    <span>{{item.StartTime | time}} - {{item.EndTime | time}}</span>
                  </p>
                  <p style="text-align: right"><span>-- {{item.UserName}}({{item.OrgUnitName}})</span></p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="审批流">
        <div class="wd-scroll-body">
          <img v-if="workflowimg" width="100%" :src="workflowimg">
          <p v-else style="padding-top: 15px; font-size: 14px" class="wd-note-text">加载中...</p>
        </div>
      </van-tab>
    </van-tabs>
    <van-overlay :show="loading">
      <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
  const userNo = localStorage.getItem('userID')

  import {
    apiGetDetail,
    apiGetWorkflow
  } from '@/api/'

  import moment from 'moment'

  export default {
    data() {
      return {
        tabActive: 0,
        loading: false,
        form: {},
        workflow: [],
        instanceId: '',
        sphjLoading: false,
        workflowimg: ''
      }
    },
    created() {
      const vm = this
      vm.loading = true
      // 获取详情
      apiGetDetail(userNo, vm.$route.query.id).then(res => {
        if (res.code == 2000) {

          if (res.data.reviewDate)
            res.data.reviewDate = moment(res.data.reviewDate.time).format('YYYY-MM-DD')

          vm.form = res.data

          vm.form.itemList.forEach(item => {
            if (item.itemContent == '检验批（隐蔽）及分项资料是否移交总包') {
              vm.form.jypjfx = item.status
            }
            if (item.itemContent == '对分包单位的的罚款是否已执行落地') {
              vm.form.dfbdwcf = item.status
            }
            if (item.itemContent == '甲供材超量费用是否已扣减') {
              vm.form.jgcclfy = item.status
            }
          })

          var instanceId = vm.instanceId = res.data.instanceId

          if (instanceId && instanceId !== '-1') {
            // 获取审批痕迹
            vm.sphjLoading = true
            apiGetWorkflow(userNo, instanceId).then(res2 => {
              vm.workflow = res2.data.WorkList.WorkFlowItem
              vm.sphjLoading = false
            })
          }

          // 审批流图片
          var baseURL = process.env.NODE_ENV === 'development' ? '/api/' : '/'
          var workflowimgsrc = ''

          if (userNo) {
            workflowimgsrc = baseURL + 'csn/a/mobile/workflow/imgInfo/downloadImage2?instanceId=' + this.instanceId + '&testOAuthUser=' + userNo
          } else {
            workflowimgsrc = baseURL + 'csn/a/mobile/workflow/imgInfo/downloadImage2?instanceId=' + this.instanceId
          }

          var workflowimgObj = new Image()

          workflowimgObj.onload = function() {
            vm.workflowimg = workflowimgsrc
          }

          workflowimgObj.src = workflowimgsrc
        }
        vm.loading = false
      })
    },
    methods: {
      shenpihj(state) {
        switch(state) {
          case '0':
            return 'status2'
          break
          default:
            return 'status1'
        }
      },
      getWorkflowImage() {
        
      }
    },
    filters: {
      time(v) {
        return moment(v).format('YYYY/MM/DD')
      }
    }
  }
</script>